import { ref, h } from "../../lib/guide-mini-vue.esm.js";
// 左侧对比
// const prevChildren = [
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
//     h("p", {key:"C"}, "C"),
// ];
// const nextChildren = [
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
//     h("p", {key:"D"}, "D"),
//     h("p", {key:"E"}, "E"),
// ]

// 右侧对比
// const prevChildren = [
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
//     h("p", {key:"C"}, "C"),
// ];
// const nextChildren = [
//     h("p", {key:"D"}, "D"),
//     h("p", {key:"E"}, "E"),
//     h("p", {key:"B"}, "B"),
//     h("p", {key:"C"}, "C"),
// ]

// 新旧节点长度对比，新比旧节点多(左侧)
// (a b)
// (a b) c
// const prevChildren = [
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
// ];
// const nextChildren = [
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
//     h("p", {key:"C"}, "C"),
//     h("p", {key:"D"}, "D"),
// ]

// 新旧节点长度对比，新比旧节点多(右侧)
// (a b)
// c (a b)
// const prevChildren = [
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
// ];
// const nextChildren = [
//     h("p", {key:"D"}, "D"),
//     h("p", {key:"C"}, "C"),
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
// ]

// 老的比新的长
// 删除老的
// (a b) c
// (a b)
// 左侧
// const prevChildren = [
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
//     h("p", {key:"C"}, "C"),
// ];
// const nextChildren = [
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
// ]

// 老的比新的长
// 删除老的
// a (b c) 
// (b c)
// 右侧
// const prevChildren = [
//     h("p", {key:"A"}, "A"),
//     h("p", {key:"B"}, "B"),
//     h("p", {key:"C"}, "C"),
// ];
// const nextChildren = [
//     h("p", {key:"B"}, "B"),
//     h("p", {key:"C"}, "C"),
// ]

// a,b,(c,d),f,g
// a,b,(e,c),f,g
// d节点在新的里面是没有的，需要删除掉
// c节点的props也发生了改变
// const prevChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "C", id: "c-prev" }, "C"),
//     h("p", { key: "D" }, "D"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ];
// const nextChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "E" }, "E"),
//     h("p", { key: "C", id: "c-next" }, "C"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ]

// a,b,(c,e,d),f,g
// a,b,(e,c),f,g
// d节点在新的里面是没有的，需要删除掉
// c节点的props也发生了改变
// const prevChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "C", id: "c-prev" }, "C"),
//     h("p", { key: "E" }, "E"),
//     h("p", { key: "D" }, "D"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ];
// const nextChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "E" }, "E"),
//     h("p", { key: "C", id: "c-next" }, "C"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ]


// 移动（节点存在于新的和老的里面，但是位置变了）
// a,b,(c,d,e),f,g
// a,b,(e,c,d),f,g
// const prevChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "C" }, "C"),
//     h("p", { key: "D" }, "D"),
//     h("p", { key: "E" }, "E"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ];
// const nextChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "E" }, "E"),
//     h("p", { key: "C" }, "C"),
//     h("p", { key: "D" }, "D"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ]

// 创建新的节点（节点存在于新的和老的里面，但是位置变了）
// a,b,(c,e),f,g
// a,b,(e,c,d),f,g
// const prevChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "C" }, "C"),
//     h("p", { key: "E" }, "E"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ];
// const nextChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "E" }, "E"),
//     h("p", { key: "C" }, "C"),
//     h("p", { key: "D" }, "D"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ]

// 综合例子
// a,b,(c,d,e,z),f,g
// a,b,(d,c,y,e),f,g
// const prevChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "C" }, "C"),
//     h("p", { key: "D" }, "D"),
//     h("p", { key: "E" }, "E"),
//     h("p", { key: "Z" }, "Z"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ];
// const nextChildren = [
//     h("p", { key: "A" }, "A"),
//     h("p", { key: "B" }, "B"),
//     h("p", { key: "D" }, "D"),
//     h("p", { key: "C" }, "C"),
//     h("p", { key: "Y" }, "Y"),
//     h("p", { key: "E" }, "E"),
//     h("p", { key: "F" }, "F"),
//     h("p", { key: "G" }, "G"),
// ]

// fix  C 节点应该是以move 而不是删除之后重新创建的
const prevChildren = [
    h("p", { key: "A" }, "A"),
    h("p", {}, "C"),
    h("p", { key: "B" }, "B"),
    h("p", { key: "D" }, "D"),
];
const nextChildren = [
    h("p", { key: "A" }, "A"),
    h("p", { key: "B" }, "B"),
    h("p", {}, "C"),
    h("p", { key: "D" }, "D"),
]

export default {
    name: "ArrayToText",
    setup() {
        const isChange = ref(false);
        window.isChange = isChange;
        return {
            isChange
        }
    },
    render() {
        const self = this;
        return self.isChange === true ? h("div", {}, nextChildren) : h("div", {}, prevChildren);
    }
}